<template>
  <div>
    <!-- 
      vue中如何获取DOM？
      答：可以使用原生js方法（document.querySelector ....）
          vue专门提供了一种方式来获取，通过$refs来获取
      
      如何通过$refs来获取呢？
       答： 1、给标签设置ref属性，并赋值
            2、在恰当的时机通过 this.$refs.ref属性的值 来获取到DOM

      总结：$refs的作用
        1、获取原生DOM
        2、获取组件对象
          可以利用这个组件对象获取子组件的函数和属性
          可以利用这个组件对象的函数函数（属性）进行传值（给子组件）
     -->
    <h1 ref="myH1">hello vue</h1>
    <demo ref="demo"></demo>
  </div>
</template>

<script>
import demo from "./components/demo.vue"
export default {
  components: { demo },
  data(){
    return {
      a: 666
    }
  },
mounted(){
  console.log(19,this.$refs.myH1);
  console.log(27,this.$refs.demo);
  // 调用子组件中的函数并传值，和属性并赋值
  this.$refs.demo.fn(this.a);
   console.log(this.$refs.demo.msg);
   this.$refs.demo.test = this.a;
}
}
</script>

<style>

</style>